<template>
  <div style="margin: 5px 0px">
    <el-button size="mini" type="primary" @click="cooManagement = true">创建</el-button>
    <el-button size="mini" type="primary" @click="sendBtn">提交</el-button>
    <el-button size="mini" type="primary" @click="deleteBtn">删除</el-button>
    <!-- <el-button size="mini" type="primary" @click="toStartBtn">归零</el-button> -->
    <el-dialog title="创建协调单" :visible.sync="cooManagement">
      <el-form>
        <el-form-item>
          <div class="mr-coom-searchBox" style="margin-left:20px">
            <el-button size="mini" type="primary" @click="tableSearch">查询</el-button>
            <el-button size="mini" type="primary" @click="reOrderSearch">重置</el-button>
          </div>
          <div class="mr-coom-topSearch">
            <ul>
              <li>
                <el-input size="mini" v-model="barcode" placeholder="请输入条码" ></el-input>
                <span>条码：</span>
              </li>
              <li>
                <el-input size="mini" v-model="mProductNumber" placeholder="成品型号" ></el-input>
                <span>成品型号：</span>
              </li>
              <li>
                <el-input size="mini" v-model="qualityCode" placeholder="质量编号" ></el-input>
                <span>质量编号：</span>
              </li>
            
              <li>
                <el-input  size="mini" v-model="wuliaoNum" placeholder="请输入内容" ></el-input>
                <span>物料编码：</span>
              </li>
              <li>
                <el-input size="mini" v-model="jixing"  placeholder="请输入内容" ></el-input>
                <span>机型：</span>
              </li>
              <li>
                <el-input
                  size="mini"
                  v-model="pici"
                  placeholder="请输入内容"
                   
                ></el-input>
                <span>批次：</span>
              </li>
              <li>
                <el-input
                  size="mini"
                  v-model="deliveryEmpCode"
                  placeholder="请输入内容"
              
                ></el-input>
                <span>移交人：</span>
              </li>
              <li>
                <el-date-picker
                  size="mini"
                  v-model="startTime"
                  type="date"
                  placeholder="选择日期"
                ></el-date-picker>
                <span>移交时间从：</span>
              </li>
              <li>
                <el-date-picker
                  size="mini"
                  v-model="endTime"
                  type="date"
                  placeholder="选择日期"
                ></el-date-picker>
                <span>到：</span>
              </li>
            </ul>
          </div>
        </el-form-item>
        <div class="mr-coom-searchTable">
          <TableTitle>
            <slot>
              <p>交接单信息</p>
            </slot>
          </TableTitle>
          <div class="mr-coom-TableBox">
            <el-table ref="receiveTable" size="mini" :data="resData" 
            highlight-current-row style="width: 100%"  height="220" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55"> </el-table-column>
            <!--  <el-table-column type="index" label="序号" width="50" :show-overflow-tooltip="true"> </el-table-column>-->
            <el-table-column prop="ROW_ID" label="序号" width="50"  :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="requireShop" label="需求单位" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="barcode" label="条码" width="130"  :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="deliveryPlanCode" label="交接单号" width="130"  :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="mesCheckQualiticationId" label="合格证信息" width="130" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="itemName" label="物料名称" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="productCode" label="机型" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="itemCode" label="图号" width="150" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="mProductNumber" label="型号" width="150" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="qualityCode" label="质量编号" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="batchNo" label="批次" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="startLotNo" label="架次" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="deliveryQty" label="数量" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="mdsUnit" label="计量单位" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="itemType" label="物料大类" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="attribute18" label="制造单位" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="empName" label="移交人" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="deliveryDate" label="移交时间" width="120" :show-overflow-tooltip="true"> </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNumber"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
            >
            </el-pagination>
          </div>
          <div class="mr-coom-returnListBox">
            <TableTitle class="mr-coom-returnListTitle">
              <slot>
                <p>协调单创建</p>
              </slot>
            </TableTitle>
            <div style="margin:5px 0">
              <el-button size="mini" type="primary" @click="createSaveBtn">保存</el-button>
              <el-button size="mini" type="primary" @click="reInput">重置</el-button>
            </div>
            <div class="mr-coom-returnListInfo">
              <ul style="height:120px">
                <!-- <li>
                  <span>条码：</span>
                  <el-input
                    size="mini"
                    v-model="barcode"
                    placeholder="请输入内容"
                  ></el-input>
                </li> -->
                <li>
                  <span>问题类型：</span>
                  <el-select size="mini" v-model="problemType" placeholder="请选择">
                    <el-option
                        v-for="item in cclistQtype"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label"
                    >
                    </el-option>
                  </el-select>
                </li>
                <li class="lastPro">
                  <span>问题内容：</span>
                  <!-- <el-input
                    size="mini"
                    v-model="lastList.problemContent"
                    placeholder="请输入内容"
                  ></el-input> -->
                    <textarea name="sss" v-model="problemContent" id="ss" cols="30" rows="5" ></textarea>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { mrCmTcTableSearch,mrCmCclistCreate,mrCmCclistSubmit,mrCmCclistStatus,mrCmCreatrProType,mrCmCclistDelete } from "@/utils/api.js"
import TableTitle from "../../../../../components/TableTitle.vue";
export default {
  name: "",
  components: {
    TableTitle,
  },
  data() {
    return {
        value11:'',
      resData: [],
      totalCount: 0,
      pageSize: 20,
      pageNumber: 1,
      // 零件所在单位发起框
      cooManagement: false,
      //弹窗上input
      //条码
      barcode:'',
      // 机型
      jixing:'',
      // 物料编码
      wuliaoNum: "",
      // 交接单号
      returndh: "",
      // 退库移交单位
      returnyjdw: "",
      // 退库接收单位
      returnjsdw: "",
      // 图号
      tuhao: "",
      //  批次
      pici: "",
      //  起始架次
      startjiaci: "",
      //  截止架次
      endjiaci: "",
      // 质量编号
      qualityCode: "",
      // 成品型号
      mProductNumber: "",
      // 移交单位简码
      returnDwJm: "",
      // 接收单位简码
      receiveDwJm: "",
      // 零件图号
      partTuHao:"",
      // 父件型号
      fatherType:"",
      // 交接类型
      returnType: "",
      // 交接状态
      returnzt: "",
      // 申请人
      sqPerson: "",
      // 开始时间
      startTime: "",
      // 结束时间
      endTime: "",
      // 物料类型
      wuliaoType: "",
      // 移交人 
      deliveryEmpCode:'',
      // 可删
      usableQty: "",
      // 弹窗问题类型下拉框--接口获取内容
      cclistQtype:[],
      // 创建协调单内的input数据 -- 暂时未写
        barcode:'',
        problemType:'',
        problemContent:'',
        // 弹窗勾选信息储存
        checkDataInfo:'',
        // idnex表格复选数据信息
        indexDataInfo:[],
        selectedData:[]
    };
  },
  methods: {
    // 弹窗查询重置
    reOrderSearch(){
      this.wuliaoNum = ''
      this.pici = ''
      this.jixing = ''
      this.deliveryEmpCode = ''
      this.startTime = ''
      this.endTime = ''
      this.qualityCode=''
      this.barcode=''
      this.mProductNumber=''
    },
    // 弹窗查询
    tableSearch(){
      var that = this;
      mrCmTcTableSearch({
          // 物料类型 父件型号 没有接收字段就没传 
          searchParams:{
            barcode:this.barcode,
            productCode:this.jixing,
            batchNo:this.pici,
            itemCode:this.wuliaoNum,
            qualityCode:this.qualityCode,
            deliveryEmpCode:this.deliveryEmpCode,
            startTime:this.startTime,
            endTime:this.endTime,
            mProductNumber:this.mProductNumber
          },
          pageParameter:{
            rows:this.pageSize,
            page:this.pageNumber
          }
        }).then((res)=>{
          if(res.data.retCode == 200){
            // 拿到的数据传给order的表中
            that.resData = res.data.responseBody.result
            that.totalCount = res.data.responseBody.pageParameter.totalCount
          }else{
            this.$Alert({
              title: "失败",
              message: '交接单信息查询失败！',
              type: "error",
            })
          }
          console.log('交接单信息查询',res)
        })
    },
    //多选
    handleSelectionChange(val){
      this.selectedData = val;
    },
    // 每页数据条数
    handleSizeChange(val) {
      console.log(val);
      this.pageSize = val;
      this.$options.methods.tableSearch.bind(this)();
    },
    // 页数
    handleCurrentChange(val) {
      console.log(val);
      this.pageNumber = val;
      this.$options.methods.tableSearch.bind(this)();
    },
    // 重置输入框
    reInput(){
        // this.barcode = ''
        // this.problemType = ''
        this.problemContent = ''
    },
    //删除协调单（状态为协调中的）
    deleteBtn() {
        let applyEmpcode = sessionStorage.getItem("userJobNumber")
        mrCmCclistDelete({
          applyEmpcode:applyEmpcode,
          data:this.indexDataInfo
        }).then((res)=>{
            console.log("删除",res)
            if(res.data.retCode == 200){
                  this.$Alert({
                    title: "成功",
                    message: res.data.message,
                    type: "success",
                  });
                // 成功后刷新index Table
                this.$bus.$emit('mrCmIndexTableRe','re')
                }else {
                  this.$Alert({
                    title: "失败",
                    message: res.data.message,
                    type: "error",
                  });
                }
        })
      },
    // 创建保存按钮
    createSaveBtn() {
        if(this.selectedData.length==0){
          this.$Alert({title: "失败",message: "请至少选择一条记录",type: "error"});
          return ;
        }
        console.log("this.selectedData",this.selectedData);
        let empCode = sessionStorage.getItem("userJobNumber")
        mrCmCclistCreate({
          wmsDeliveryPlans:this.selectedData,
          problemType:this.problemType,
          problemContent:this.problemContent,
          applyEmpcode:empCode,
        }).then((res)=>{
          console.log('创建协调单',res)
          if(res.data.retCode == 200){
            this.$Alert({
              title: "成功",
              message: res.data.message,
              type: "success",
            });
          //   保存成功后关闭弹窗
          this.cooManagement = false;
          // 成功后刷新index Table
          this.$bus.$emit('mrCmIndexTableRe','re')
          }else {
            this.$Alert({
              title: "失败",
              message: res.data.message,
              type: "error",
            });
          }
        })
    },
    // 提交
    sendBtn() {
      
      let applyEmpcode = sessionStorage.getItem("userJobNumber")
      mrCmCclistSubmit({
        applyEmpcode:applyEmpcode,
        deliveryCoordinates:this.indexDataInfo,
        ip:window.location.hostname
      }).then((res)=>{
        console.log("提交",res)
        if(res.data.retCode == 200){
              this.$Alert({
                title: "成功",
                message: res.data.message,
                type: "success",
              });
            // 成功后刷新index Table
            this.$bus.$emit('mrCmIndexTableRe','re')
            }else {
              this.$Alert({
                title: "失败",
                message: res.data.message,
                type: "error",
              });
            }
      })
    },
    // 归零
    toStartBtn() {
      let applyEmpcode = sessionStorage.getItem("userJobNumber")
      mrCmCclistStatus({
        applyEmpcode:applyEmpcode,
        coordiantes:this.indexDataInfo,
        ip:window.location.hostname
      }).then((res)=>{
        console.log("归零",res)
        if(res.data.retCode == 200){
              this.$Alert({
                title: "成功",
                message: res.data.message,
                type: "success",
              });
            // 成功后刷新index Table
            this.$bus.$emit('mrCmIndexTableRe','re')
            }else {
              this.$Alert({
                title: "失败",
                message: res.data.message,
                type: "error",
              });
            }
      })
    },
  },
  mounted(){
    // 弹窗--协调单创建问题类型下拉框接口
    mrCmCreatrProType({

    }).then((res)=>{
      console.log('问题类型下拉列表',res)
      for(let t=0;t<res.data.responseBody.length;t++){
        let tlist = {value:res.data.responseBody[t].problemTypeId,label:res.data.responseBody[t].problemType}
        this.cclistQtype.push(tlist)
      }
    })

    this.$bus.$on('mrCoMmaterialId',(e)=>{
      this.indexDataInfo = e
    })
  }
};
</script>
<style>
.el-dialog {
  width: 90% !important;
  height: 90% !important;
  margin-top: 20px !important;
  margin-left: 5% !important;
  overflow: scroll;
}
.el-dialog__body {
  padding: 0;
}
</style>
<style scoped>
.mr-coom-topSearch ul li {
  float: left;
  width: 21%;
  height: 30px;
  line-height: 30px;
  margin-right: 1%;
  margin-bottom: 5px;
  overflow: hidden;
}
.mr-coom-topSearch ul li span {
  float: right;
}
.mr-coom-topSearch ul li div {
  float: right;
}
.mr-coom-TableBox {
    text-align: center;
}
.mr-coom-searchTable {
    width: calc(100% - 35px);
    margin-left: 20px;
}
.el-form-item {
    margin: 0;
}
.mr-coom-returnListInfo ul li{
    float: left;
    width: 25%;
}
.mr-coom-returnListInfo ul li:nth-child(1) .el-input {
    width: 200px;
}
.lastPro{
    margin-left: 140px;
}
.lastPro {
    position: relative;
}
.lastPro span {
    position: absolute;
    top: 0;
    left: -70px;
}
.el-input {
    width: 120px;
}
</style>